<template>
    <div class="mian">
        <div>&nbsp;</div>
        <div style="margin-top:20px;float: left;margin-left:30px;font-size:22px">订单确认</div>
        <div style="clear: both;margin-top:50px;float: left;margin-left:30px;font-size:14px">讲师：{{OrderVo.subject}}</div>
        <div class="box" style="margin-top:150px">
            <div>
                <div class="minbox" ><img src="@/assets/home2.jpg" width="100%" height="100%" alt=""></div>
                <div style="color:red;font-size:22px;float: right;margin-top:-100px;margin-right:40px">￥{{OrderVo.totalAmount}}</div>
            </div>
        </div>
        <div class="bbox">
            <div style="float: right;">
                <el-checkbox>同意本站协议</el-checkbox><span style="font-size:14px">《学院学习协议》</span>
            </div>
        </div>
        <div class="bottom">
            <span style="width:100px;float: left;margin-top:16px;margin-left:10px;font-size:13px">返回课程详情</span> <span style="float: right;height: 100%;width: 120px;background-color:red;cursor: pointer;"><div style="margin-top:12px;color:white;" @click="pay">立即支付</div></span>
        </div>
    </div>
</template>
<script>
import OrderApi from '@/api/order'
export default {
    data(){
        return{
            OrderId:"",
            OrderVo:{
                subject:''//初始化防止控制台null 报错
            }
        }
    },
    created(){
        this.createOrder();//创建订单
        this.getOrder()//拉取订单信息
    },
    methods:{
        pay(){ //支付跳转
           window.open(`http://localhost:8225/api/alipay/pay?subject=${this.OrderVo.subject}&traceNo=${this.OrderId}&totalAmount=${this.OrderVo.totalAmount}`)
        },
         createOrder(){
            OrderApi.createOrder(this.$route.params.id).then(res=>{
             this.OrderId=res.data.item;
            })
        },
        getOrder(){
            OrderApi.fecthOrder(this.$route.params.id).then(res=>{
                this.OrderVo=res.data.item;
            })
        }
    }
}
</script>
<style scoped>
.mian{
    width: 1350px;
    margin-left:100px;
}
.box{
    height: 150px;
    width: 100%;
    border: 1px solid #bbb;
}
.bbox{
    height: 50px;
    width: 100%;
    margin-top:20px;
}
.bottom{
    height: 50px;
    width: 100%;
    border: 1px solid #bbb;
    margin-bottom: 40px;
}
.box .minbox{
    height: 100px;
    width: 200px;
     border: 1px solid #bbb;
     margin-top: 25px;
     margin-left: 20px;
}
</style>
